<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
		<h2>新创建的 Vue CLI 项目</h2>
		<h2>有框</h2>
		<div style="margin-top: 20px">
			<el-radio-group text-color="#fff" fill="#f00" v-model="radio2" size="medium">
				<el-radio-button label="上海"></el-radio-button>
				<el-radio-button label="北京"></el-radio-button>
				<el-radio-button label="广州"></el-radio-button>
				<el-radio-button label="深圳"></el-radio-button>
			</el-radio-group>
		</div>
		<h2>单选框组</h2>
		<el-radio-group v-model="radio">
			<el-radio :label="3">备选项</el-radio>
			<el-radio :label="6">备选项</el-radio>
			<el-radio :label="9">备选项</el-radio>
		</el-radio-group>
		<h2>单选框禁用</h2>
		<el-radio disabled v-model="radio" label="禁用">备选项</el-radio>
		<el-radio disabled v-model="radio" label="选中且禁用">备选项</el-radio>
		<h2>单选框</h2>
		<el-radio v-model="radio" label="1">备选项</el-radio>
		<el-radio v-model="radio" label="2">备选项</el-radio>
		<el-radio v-model="radio" label="3">备选项</el-radio>
		<h2>布局</h2>
		<el-container>
			<el-main>
				<el-row :gutter="10">
					<el-col :span="4">
						<div class="dh">zuocedanghang</div>
					</el-col>
					<el-col :span="11">
						<div class="lb">lunbo1</div>
						<div class="lb2">lunbo2</div>
					</el-col>
					<el-col :span="3">
						<div class="gg">guangaowei</div>
						<div class="gg2">guangggaowei2</div>
					</el-col>
					<el-col :span="6">
						<div class="hi">nihao</div>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
		<h2>按钮</h2>
		<el-button>默认按钮</el-button>
		<el-button plain>朴素按钮</el-button>
		<el-button type="primary" plain>主要按钮</el-button>
		<el-button type="danger" round>危险按钮</el-button>
		<el-button type="primary" icon="el-icon-s-flag" circle></el-button>
		<h2>文字按钮</h2>
		<el-button type="text">文字按钮</el-button>
		<h2>按钮组</h2>
		<el-button-group>
			<el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
			<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
		</el-button-group>
		<h2>图标</h2>
		<!-- 	<i class="el-icon-edit"></i>
	<i class="el-icon-setting"></i> -->
		<el-button type="primary" icon="el-icon-search">搜索</el-button>
		<h2>2栏</h2>
		<el-row>
			<el-col :span="12">2栏</el-col>
			<el-col :span="12">2栏</el-col>
		</el-row>

		<h2>4栏</h2>
		<el-row>
			<el-col :span="6">4栏</el-col>
			<el-col :span="6">4栏</el-col>
			<el-col :span="6">4栏</el-col>
			<el-col :span="6">4栏</el-col>
		</el-row>

		<h2>6栏</h2>
		<el-row>
			<el-col :span="4">6栏</el-col>
			<el-col :span="4">6栏</el-col>
			<el-col :span="4">6栏</el-col>
			<el-col :span="4">6栏</el-col>
			<el-col :span="4">6栏</el-col>
			<el-col :span="4">6栏</el-col>
		</el-row>

		<h2>分栏间隔</h2>
		<!-- 外层容器 -->
		<el-container>
			<!-- 主要区域容器 -->
			<el-main>
				<!-- 属性指定每栏之间的间隔 默认为0 -->
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="span">4栏</div>
					</el-col>
					<el-col :span="6">
						<div class="span">4栏</div>
					</el-col>
					<el-col :span="6">
						<div class="span">4栏</div>
					</el-col>
					<el-col :span="6">
						<div class="span">4栏</div>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
		
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		props: {
			msg: String,
		},
		data() {
			return {
				radio: '1',
				radio1: '',
				radio2: '上海',
				radio3: '上海',
				radio4: '上海'
			}
		},
		methods: {
			abc(e) {
				console.log(e);
				console.log(this.radio2);
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.dh,
	.lb,
	.lb2,
	.gg,
	.gg2,
	.hi {
		background: yellow;
		color: white;
	}

	.dh {
		height: 500px;
	}

	.lb {
		height: 290px;
		margin-bottom: 10px;
	}

	.lb2 {
		height: 200px;
	}

	.gg {
		height: 290px;
		margin-bottom: 10px;
	}

	.gg2 {
		height: 200px;
	}

	.hi {
		height: 500px;
	}

	/* 分栏间隔里的span样式 */
	.span {
		background: red;
		color: white;
	}

	h3 {
		margin: 40px 0 0;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}
</style>
